<template>
    <div>
      <el-card >
      <el-row>
        <el-col :span="20" :offset="2"> 
        <h1 align="center">{{CompanyDetail.internshipName}}</h1>
         <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in CompanyDetail.pictureUrlList" :key="item">
                <h3 class="medium"> <el-image :src="item"></el-image></h3>
            </el-carousel-item>
        </el-carousel>
        <div>
             <div v-html="CompanyDetail.detail" ></div>
        </div>
        <!--评分-->
        <div>
            <el-rate
            v-model="value"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
            </el-rate>
        </div>
        <div v-if ="choiceButton" >
         <el-button type="primary" @click="dialogFormVisible = true">选报该实习单位</el-button>
         <el-tooltip class="item" effect="dark" content="如你在此单位实习实训，请选报该单位" placement="right-start">
            <i class="el-icon-question"></i>
        </el-tooltip>
        </div>
        <el-divider></el-divider>
         <comment  :internshipId="params.internshipId"></comment>
         </el-col>
        </el-row>
         <el-dialog title="实习信息" :visible.sync="dialogFormVisible">
            <el-form :model="choiceParams" class="choiceDialog">
                  <el-form-item label="实训描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="choiceParams.content" autocomplete="off" :disabled="inputdisabled"></el-input>
                  </el-form-item>
                  <el-row  :gutter="20">
                    <el-col :span="10">
                      <el-form-item label="实训导师姓名" :label-width="formLabelWidth">
                        <el-input v-model="choiceParams.tutor" autocomplete="off" :disabled="inputdisabled"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="10">
                      <el-form-item label="实训导师手机号码" :label-width="formLabelWidth">
                        <el-input v-model="choiceParams.tutorPhone" autocomplete="off" :disabled="inputdisabled"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <div v-if="CompanyDetail.internshipType!==0">
                    <el-row  :gutter="20">
                      <el-col :span="10">
                        <el-form-item label="实习协议" :label-width="formLabelWidth">
                          <el-upload
                            class="avatar-uploadPhoto"
                            :action="actionUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessContract"
                            :before-upload="beforeAvatarUpload">
                          <img v-if="choiceParams.contract" :src="choiceParams.contract" class="uploadPhoto">
                          <i v-else class="el-icon-plus avatar-uploadPhoto-icon"></i>
                        </el-upload>
                        </el-form-item>
                      </el-col>
                      <el-col :span="10">
                        <el-form-item label="实习照片" :label-width="formLabelWidth">
                          <el-upload
                            class="avatar-uploadPhoto"
                            :action="actionUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccessPhoto"
                            :before-upload="beforeAvatarUpload">
                          <img v-if="choiceParams.photo" :src="choiceParams.photo" class="uploadPhoto">
                          <i v-else class="el-icon-plus avatar-uploadPhoto-icon"></i>
                        </el-upload>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="choiceCompany()">确 定</el-button>
            </div>
          </el-dialog>
      </el-card>
    </div>
</template>

<script>

 import comment from '@/components/comment'
 import { choiceCompany,getCompanyDetail} from '@/api/company'
  import { testBinding} from '@/api/binding'
 export default {
      components: {
      comment
    },
    data() {
      return {
        value: 0,
        params:{
          internshipId:""
        },
        choiceParams:{
          internshipId:'',
          tutor:'',
          tutorPhone:'',
          content:'',
          contract:'',
          photo:''
        },
        dialogFormVisible:false,
        CompanyDetail:'',
        actionUrl:process.env.VUE_APP_BASE_UPLOAD,
        isBinding:false,
      }
    },
    //页面打开时执行的方法
    created() {
      this.params.internshipId = this.$route.query.companyId;
      this.choiceParams.internshipId = this.$route.query.companyId;
      this.getCompanyDetail();
      if(this.$store.state.user.userType===2){
        this.testBinding()
      }
    },
    computed:{
      choiceButton:function (){
        if(this.$store.state.user.userType===2&&!this.isBinding){
          return true
        }else{
          return false
        }
      }
    },
    methods: {
      async getCompanyDetail(){
        let res = await getCompanyDetail(this.params);
        this.CompanyDetail = res.bean;
        this.value = res.bean.score
      },
      async testBinding(){
        let res = await testBinding();
        this.isBinding = res.bean.isBinding;
      },
      async choiceCompany(){
        await choiceCompany(this.choiceParams).then(()=>{
            this.$message({
              type: 'success',
              message: '选报成功!'
            })
            this.dialogFormVisible = false;
            this.choiceParams.tutor = ''
            this.choiceParams.tutorPhone = ''
            this.choiceParams.content = ''
            }
          ).catch(err=>{
            this.$message({
              type: 'error',
              message: '选报失败!'
            })
            })
      },
      handleAvatarSuccessContract(res, file) {
        this.choiceParams.contract = res.bean.url
      },
      handleAvatarSuccessPhoto(res, file) {
        this.choiceParams.photo = res.bean.url
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    }
  }
  
</script>
<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .avatar-uploadPhoto .el-uploadPhoto {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploadPhoto .el-uploadPhoto:hover {
    border-color: #409EFF;
  }
  .avatar-uploadPhoto-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 150px;
    line-height: 178px;
    text-align: center;
  }
  .uploadPhoto {
    width: 200px;
    height: 150px;
    display: block;
  }
</style>